<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<view class="annq" :style="{height:sysHeight}"></view>
				
				<view class="sys-head">
					<view class="tabs">
						<view class="li" :class=" categoryType == 0 ? 'on' : '' " @click="onCategoryType(0)">
							<text>推荐</text>
						</view>
						<view class="li" :class=" categoryType == 1 ? 'on' : '' " @click="onCategoryType(1)">
							<text>关注</text>
						</view>
					</view>
				</view>
				<scroll-view class="list-con-scroll"
					scroll-x="true"
					scroll-with-animation
					>
					<view class="ejfl">
						<view class="li" 
							  :class=" categoryIndex == index ? 'on' : '' " 
							  v-for="(item,index) in categoryList" 
							  :key="index"
							  @click="onCategoryClick(index)"
							  >
							<text>{{item.title}}</text>
						</view>
					</view>
					
				</scroll-view>
				<!-- <TbarNav title="活动列表" :is_back="false" :isbg="1" :stickys="true"></TbarNav> -->
			</template>
			<view class="list">
				<view class="li" :class="item.isfollow?'on':''" v-for="(item,index) in dataList" :key="index">
					<view class="head">
						<view class="left"  @click="onJmup('/pages/reserve/activity/home?uid='+item.uid)">
							<image :src="item.user_avatar" mode="widthFix"></image>
							<view class="info">
								<view class="title">
									<text>{{item.user_nickname}}</text>
									<image v-if="item.level" :src="baseUrl + '/static/wximages/icon-08.png'" mode="widthFix"></image>
								</view>
								<text>{{item.user_signature}}</text>
							</view>
						</view>
						
						<view class="right">
							<button @click="onFollow(index)">{{item.isfollow ? '已关注' : '关注'}}</button>
						</view>
					</view>
					
					<view class="desc"  @click="onJmup('/pages/reserve/activity/details?id='+item.id)">
						<image class="le-img" :src="item.image" mode="aspectFill"></image>
						<view class="desc-info">
							<view class="desc-title">
								<text>{{item.title}}</text>
							</view>
							
							
							<view class="desc-flk">
								<text>{{item.ctitle}}</text>
							</view>
							<view class="desc-txt">
								<!-- <image :src="baseUrl + '/static/wximages/icon-02.png'" mode="widthFix"></image> -->
								<text>{{item.date}}</text>
							</view>
							
							<view class="desc-txt">
								<!-- <image :src="baseUrl + '/static/wximages/icon-03.png'" mode="widthFix"></image> -->
								<text>{{item.address}}</text>
							</view>
							
							
							<view class="browsing-history">
								<view class="browsing-history-tx">
									<image v-for="(x, idx) in item.record" 
									:src="x.user_avatar" 
									v-if="idx < 3"
									mode="aspectFill"></image>
								</view>
								<text 
								
								:style="'margin-left: '+ (15 * ( item.record.length < 3 ? item.record.length + 1 : 4)) +'rpx;'">{{item.record.length}}人参加</text>
								
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</z-paging>
		
		<view class="entrance">
			<image @click="onJmup('/pages/reserve/activity/publish')" :src="baseUrl + '/static/wximages/entrance.png'" mode="widthFix"></image>
		</view>
		
		<pageFooter></pageFooter>
	</view>
</template>

<script>
	import { getCircleList,userCircleFollow, getCircleCategoryList } from '@/api/reserve.js';
	import pageFooter from '@/components/pageFooter/index.vue'
	import TbarNav from '@/components/TbarNav'
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		components: {
			pageFooter,
			TbarNav
		},
		data() {
			return {
				sysHeight: sysHeight,
				dataList: [],
				categoryList: [],
				categoryIndex: 0,
				
				categoryType: 0, 
				baseUrl: this.$baseUrl
			}
		},
		onShow() {
			this.categoryLists()
		},
		onReady() {
		},
		methods: {
			onCategoryType(id) {
				this.categoryType = id;
				
				this.$refs.paging.reload()
				
			},
			onCategoryClick(index) {
				this.categoryIndex = index;
				this.$refs.paging.reload()
			},
			onJmup(url) {
				uni.navigateTo({
					url: url
				})
			},
			onFollow(index) {
				userCircleFollow({
					cid: this.dataList[index].uid
				}).then(res => {
					this.dataList[index].isfollow = !this.dataList[index].isfollow
				})
			},
			categoryLists() {
				getCircleCategoryList().then(res => {
					this.categoryList = res.data;
					
					this.categoryList.unshift({
						id: 0,
						title: '全部'
					})
				})
			},
			queryList(pageNo, pageSize) {
				// 此处请求仅为演示，请替换为自己项目中的请求
				
				const params = {
					page: pageNo,
					pageSize: pageSize,
					categoryType: this.categoryType,
					cid: this.categoryList.length > 0 ? this.categoryList[this.categoryIndex].id : 0
				}
				getCircleList(params).then(res => {
					this.$refs.paging.complete(res.data.data);
				})
			}
		}
	}
</script>
<style>
	page {
		background: #003153;
	}
</style>
<style scoped lang="scss">
	.annq {
		width: 100%;
		height: var(--status-bar-height);
	}
	.sys-head {
		height: 80rpx;
		display: flex;
		align-items: center;
		.tabs {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			.li {
				position: relative;
				font-weight: 400;
				font-size: 33rpx;
				color: #BFDAFC;
				margin-right: 30rpx;
				&.on {
					color: #FFFFFF;
					&::after {
						content: '';
						position: absolute;
						bottom: -10rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 43rpx;
						height: 7rpx;
						background: #FFFFFF;
						border-radius: 200rpx 200rpx 200rpx 200rpx;
					}
				}
			}
		}
	}
	.list-con-scroll {
		white-space: nowrap;
		width: 750rpx;
		// margin-top: 25rpx;
		.ejfl {
			height: 80rpx;
			display: flex;
			align-items: center;
			padding:0 30rpx;
			.li {
				flex: 0 0 auto;
				font-weight: 400;
				font-size: 30rpx;
				color: #BFDAFC;
				margin-right: 50rpx;
				&.on {
					color: #FFFFFF;
				}
			}
		}
	}
	.list {
		padding: 30rpx;
		.li {
			width: 696rpx;
			height: 547rpx;
			border-radius: 25rpx 25rpx 25rpx 25rpx;
			background-color: RGBA(74, 92, 136, 1);
			padding: 30rpx;
			margin-bottom: 30rpx;
			&.on {
				background-color: rgba(107, 46, 41, .7);
			}
			
			.head {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.right {
					button {
						width: 106rpx;
						height: 46rpx;
						background: #003153;
						border-radius: 200rpx 200rpx 200rpx 200rpx;
						font-size: 28rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 46rpx;
					}
				}
				.left {
					display: flex;
					align-items: center;
					font-size: 22rpx;
					color: #FFFAFA;
					.info {
						margin-left: 20rpx;
						&>text {
							width: 350rpx;
							display: block;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.title {
							image {
								margin-left: 10rpx;
							}
						}
					}
					image {
						width: 103rpx;
						height: 103rpx;
						border-radius: 25rpx 25rpx 25rpx 25rpx;
						// border: 2rpx solid #01002A;
					}
					.title {
						display: flex;
						align-items: center;
						font-weight: 500;
						font-size: 35rpx;
						color: #FFFAFA;
						margin-bottom: 10rpx;
						image {
							width: 28rpx;
							height: 26rpx;
						}
					}
				}
			}
			
			.desc {
				display: flex;
				align-items: flex-start;
				background: #01002A;
				padding: 15rpx;
				margin-top: 25rpx;
				border-radius: 25rpx 25rpx 25rpx 25rpx;
				.le-img {
					flex: 0 0 224rpx;
					width: 224rpx;
					height: 318rpx;
					border-radius: 15rpx 15rpx 15rpx 15rpx;
				}
				.desc-info {
					width: 100%;
					color: #fff;
					padding-left: 18rpx;
					.desc-title {
						height: 85rpx;
						font-weight: 500;
						font-size: 30rpx;
						color: #FFFAFA;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						-webkit-line-clamp: 2; /* 显示3行文本 */
						
						margin: 20rpx 0;
					}
					.desc-flk {
						margin-bottom: 20rpx;
						text {
							background: #238AFF;
							font-weight: 500;
							font-size: 20rpx;
							color: #FFFFFF;
							border-radius: 5rpx 5rpx 5rpx 5rpx;
							padding: 5rpx 20rpx;
						}
					}
					.desc-txt {
						display: flex;
						align-items: flex-start;
						font-size: 22rpx;
						color: #AAC1E4;
						margin-bottom: 10rpx;
						text {
							margin-top:-5rpx;
						}
						image {
							flex: 0 0 auto;
							width: 23rpx;
							height: 23rpx;
							margin-right: 10rpx;
						}
					}
					.browsing-history {
						width: 95%;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						font-weight: 500;
						font-size: 26rpx;
						color: #AAC1E4;
						margin-top: 40rpx;
						text {
							// margin-right: -15rpx;
						}
						.browsing-history-tx {
							display: flex;
							align-items: center;
							margin-left: -15rpx;
							image {
								width: 32rpx;
								height: 32rpx;
								position: relative;
								border-radius: 50%;
								&:nth-child(1) {
									right: -20rpx;
									z-index: 9;
								}
								&:nth-child(2) {
									right: -10rpx;
									z-index: 8;
								}
								&:nth-child(3) {
									z-index: 1;
								}
							}
						}
					}
				}
			}
		}
	}
	
	
	.entrance {
		position: fixed;
		right: 0;
		bottom: 30%;
		z-index: 999;
		image {
			width: 200rpx;
			height: 200rpx;
		}
	}
</style>